<template>
  <div class="box">
    <!-- 把注册好的组件当成标签使用 -->
    <Child :count="count" :obj="obj" :getCount="getCount" :getObj="getObj" />
  </div>
</template>

<script>
// 导入子组件
import Child from './Child.vue'
export default {
  name: 'PropsTest',
  // 将组件进行注册
  components: { Child },
  data() {
    return {
      // 传递基本数据类型
      count: 0,
      // 传递引用数据类型
      obj: { name: '张三' },
      // 在data中打印this,this是undefined
      //   add: console.log(this)
      // 在data中声明函数,如果写成ES5的形式,this指向会有问题
      // 所以,如果想要在data中声明函数需要写成箭头函数
      //   方法放methods中还有一个原因:  data中的数据是可变的,methods配置的方法是不可变的
      // 总结:
      //      props父子组件之间的通信
      //          父给子传非函数数据类型,目的是为了让子组件展示
      //          父给子传函数数据类型,目的是为了让子组件调用这个函数修改父组件的数据
      getCount: () => {
        this.count++
      },
      getObj: () => {
        this.obj.name = 'Tom'
      }
    }
  },
  methods: {
    // getCount() {
    //   this.count++
    // },
    // getObj() {
    //   this.obj.name = 'Tom'
    // }
  },
  mounted() {
    console.log(this.add)
  }
}
</script>

<style scoped></style>
